<template>
  <div id="table">
    <table>
      <thead v-if="headData.length">
        <tr>
          <th v-for="item of headData" :key="item.id">{{ item.name }}</th>
        </tr>
      </thead>
      <tbody>
        <template v-if="headData.length" v-for="value in showData">
          <tr v-for="item of value" :key="item.label + Math.random()">
            <td v-for="_val in item" :key="_val">{{ _val }}</td>
          </tr>
        </template>
        <template v-else v-for="(value, key, index) in showData" v-if="index < 4">
          <tr v-for="(item, _index) of value" :key="item.label + Math.random()">
            <td :rowspan="value.length" v-if="_index === 0" style="background: #e3e8ec;">{{item.index2}}</td>
            <td class="column">{{item.label}}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'dataShowTable',
  props: {
    headData: {
      type: Array,
      default: () => []
    },
    showData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {}
  }
}
</script>

<style lang="scss">
#table {
  width: 100%;
  margin-top: 0.2rem;
  table {
    width: 100%;
    th {
      padding: 0.1rem 0.15rem;
      font-size: 0.12rem;
      border: 0.01rem solid rgba(116, 124, 130, 0.39);
    }
    tr {
      border:1px solid rgba(116, 124, 130, 0.39);
      text-align: center;
    }
    tbody {
      td {
        border:1px solid rgba(116, 124, 130, 0.39);
        width: 1.5rem;
        height: 0.35rem;
        line-height: 0.35rem;
        box-sizing: border-box;
        padding: 0 0.1rem;
        padding: 0.07rem 0;
      }
      .column {
        background-color: #EFF3F6;
        color: #393C3E;
      }
    }
  }
}
</style>
